<template>
  <div class="container">
    <Pagetools>
      <template #table>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="待审核" name="second"></el-tab-pane>
          <el-tab-pane label="已审核" name="third"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
        </el-tabs>
        <div class="tag">
          <i class="el-alert__icon el-icon-info"></i>
          数据一共 {{ total }} 条
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="150">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column label="提型" width="120">
            <template v-slot="{ row }">
              {{ questionType(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="280">
            <template v-slot="{ row }">
              {{ html2Text(row.question) }}
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="180">
            <template v-slot="{ row }">
              {{ formatDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column label="难度" width="120">
            <template v-slot="{ row }">
              {{ difficulty(row.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column label="审核状态" width="120">
            <template v-slot="{ row }">
              {{ checkStare(row.chkState) }}
            </template>
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column label="发布状态" width="120">
            <template v-slot="{ row }">
              {{ pubState(row) }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template v-slot="{ row }">
              <el-button @click="handlePre(row)" type="text" size="small">
                预览
              </el-button>
              <el-button
                type="text"
                size="small"
                :disabled="row.chkState == 1"
                @click="checkState(row)"
              >
                审核
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="$router.push({ path: 'new', query: { id: row.id } })"
                :disabled="row.publishState == 0"
                >修改
              </el-button>
              <el-button
                type="text"
                size="small"
                v-text="row.publishState == 0 ? '上架' : '下架'"
                @click="pubHandle(row)"
              ></el-button>
              <el-button
                type="text"
                size="small"
                :disabled="row.publishState !== 0"
                @click="delHandle(row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <template #page>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="q.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="q.pagesize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          style="float: right; margin-bottom: 20px"
        >
        </el-pagination>
      </template>
    </Pagetools>
    <!-- 试题预览 dialog -->
    <el-dialog :visible.sync="showDialog" title="题目预览">
      <questionsBaseDia v-if="showDialog" :row="row" ref="questionsDia" />
    </el-dialog>
    <!-- 审核 dialog -->
    <el-dialog :visible.sync="checkStateDialog" title="题目审核" width="25%">
      <el-radio v-model="resource" :label="1">通过</el-radio>
      <el-radio v-model="resource" :label="0">拒绝</el-radio>
      <el-input
        type="textarea"
        v-model.trim="textarea"
        :rows="4"
        placeholder="请输入审核内容"
        style="margin: 40px 0"
      >
      </el-input>
      <div style="text-align: center">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagetools from '../components/Pagetools'
import {
  choice,
  detail,
  choiceCheck,
  choicePublish,
  remove
} from '@/api/hmmm/questions'
import { html2Text, formatDate } from '@/utils'
import questionsBaseDia from './questionsBaseDia.vue'
export default {
  name: 'questions-choice',
  components: { Pagetools, questionsBaseDia },
  data () {
    return {
      activeName: 'first',
      tableData: [],
      total: 0,
      q: {
        page: 1,
        pagesize: 5,
        chkState: null
      },
      showDialog: false,
      row: {},
      checkStateDialog: false,
      textarea: '',
      resource: 1,
      rules: {
        resource: [
          { required: true, message: '请选择是否通过审核', trigger: 'change' }
        ]
      },
      checkflag: {},
      publishState: null
    }
  },
  created () {
    this.loadChoiceList()
  },
  methods: {
    // 标签页切换
    async handleClick (tab) {
      // console.log(tab, event)
      console.log(tab.label)
      switch (tab.label) {
        case '待审核':
          this.q.chkState = 0
          break
        case '已审核':
          this.q.chkState = 1
          break
        case '已拒绝':
          this.q.chkState = 2
          break
        default:
          this.q.chkState = null
          break
      }
      const res = await choice(this.q)
      // console.log(res, 111)
      if (res.status !== 200) return
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    async loadChoiceList () {
      const res = await choice(this.q)
      // console.log(res.data.items)
      if (res.status !== 200) return
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    html2Text,
    formatDate,
    // 格式化提型
    questionType (data) {
      if (data === '1') {
        return '单选'
      } else if (data === '2') {
        return '多选'
      } else if (data === '3') {
        return '简答'
      }
    },
    // 格式化难度
    difficulty (data) {
      if (data === '1') {
        return '简单'
      } else if (data === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    // 格式化发布状态
    pubState (row) {
      // console.log(row.chkState)
      if (row.chkState === 1 && row.publishState === 1) {
        return '已发布'
      } else if (row.chkState === 1 && row.publishState === 0) {
        return '已下架'
      } else {
        return '待发布'
      }
    },
    // 格式化审核状态
    checkStare (data) {
      if (data === 0) {
        return '待审核'
      } else if (data === 1) {
        return '已审核'
      } else if (data === 2) {
        return '已拒绝'
      } else {
        return '未知'
      }
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.q.pagesize = val
      this.loadChoiceList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.q.page = val
      this.loadChoiceList()
    },
    // 试题预览
    handlePre (row) {
      // console.log(row)
      this.showDialog = true
      // this.row = row
      this.loadDetail(row)
    },
    async loadDetail (row) {
      // console.log(row, 33)
      const res = await detail(row)
      // console.log(res, 33)
      this.row = res.data
    },
    checkState (row) {
      // console.log(row, 111)
      this.checkStateDialog = true
      this.checkflag = row
    },
    // 审核
    async submitForm () {
      // console.log(this.row, 111)
      if (this.textarea === '') return this.$message.warning('请输入审核意见')
      const res = await choiceCheck({
        id: this.checkflag.id,
        chkState: this.resource,
        chkRemarks: this.textarea
      })
      // console.log(res)
      if (res.status !== 200) return
      this.$message.success('审核成功')
      // 发送请求成功后关闭弹框
      this.checkStateDialog = false
      // 清空文本框
      this.textarea = ''
    },
    cancel () {
      // 关闭弹框
      this.checkStateDialog = false
      // 清空文本框
      this.textarea = ''
    },
    // 上架下架
    async pubHandle (row) {
      // console.log(row)
      let res = ''
      if (row.publishState == 0) {
        res = await this.$confirm('您确认上架这道题目吗??', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((e) => e)
        this.publishState = 1
      } else {
        res = await this.$confirm('您确认下架这道题目吗??', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((e) => e)
        this.publishState = 0
      }
      // console.log(res)
      if (res === 'confirm') {
        const result = await choicePublish({
          id: row.id,
          publishState: this.publishState
        })
        // console.log(result)
        if (result.status !== 200) return
        this.$message.success('操作成功')
      }
    },
    // 删除
    async delHandle (row) {
      const res = await this.$confirm('您确认删除这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((e) => e)
      // console.log(res)
      if (res === 'confirm') {
        const result = await remove(row)
        console.log(result)
        if (result.status !== 200) return
        this.$message.success('删除成功')
        this.loadChoiceList()
      }
    }
  },
  computed: {}
}
</script>

<style scoped lang="scss">
.container {
  margin: -6px -12px;

  .tag {
    padding-left: 12px;
    height: 40px;
    line-height: 40px;
    background-color: #f4f4f5;
    color: #909399;
    font-size: 14px;
  }
}
</style>
